import type { FC } from 'react';
import { memo, useMemo } from 'react';
import { Stage, Layer } from 'react-konva';
import Seat from './seat';
import type { SeatDatas } from '../types';
import styles from './styles.module.less';

type SeatsProps = {
  cols: number;
  rows: number;
  seatSize: number;
  seats: SeatDatas;
}

const Seats: FC<SeatsProps> = (props) => {
  const { cols, rows, seats, seatSize } = props;
  const datas = useMemo(() => Object.values(seats), [seats]);

  return (
    <Stage
      width={cols * seatSize}
      height={rows * seatSize}
      className={styles.seats}
      style={{ left: seatSize, top: seatSize }}
    >
      <Layer>
        {datas.map((val) => {
          return (
            <Seat
              key={val}
              seatJson={val}
              seatSize={seatSize}
            />
          );
        })}
      </Layer>
    </Stage>
  );
}

export default memo(Seats);